<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对）+BOM（针对浏览器）
		     学习主题：针对页面操作比较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
			 js基础就可直接学习，了解函数使用
			 基础函数----事件源之后出现，事件源语法糖中
			 html（）  作用：增加一个元素，覆盖原有html
			 val（）   作用：针对input元素，实现修改文本框内容
			 text（）  作用：生成文本内容
			 -->
			 <script src="js/jquery-1.11.1.js""></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，下面生成一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora amet eos cum labore nihil odio nisi repudiandae esse ea, magni ut laboriosam iure aliquam assumenda, modi accusantium facere commodi? Nobis.</p>
		<div style="width: 200px; height: 200px; background: #ffaaff;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" value="输入框可以直接写文本"/>
		<script>
			 $("button").click(function(){
			 	$("p").html("<h1>JQ操作DON-html函数使用</h1>")
			 });
			/* 练习：div 200*200 背景颜色自定，鼠标滑过之后，
			 下面内容修改：<h3>提示，修改为黄颜色*/
			   $("button").mouseenter(function(){
				  $("h3").html("<h3>提示</h3>") 
			   });
			  /* 练习2：按钮  文本框    点击按钮，文本增加一行文本 */
			   $("input[type='button']").click(function(){
				//  alert("jq选择器是否选中") 
				$("input[type='text']").val("文本框内容修改")
			   });
			   /* 利用JQ操作DOM（页面效果）：1.元素内容操作（3个函数）
			                              html()
										  val()
										  text()
				                          2.属性操作（4个函数）
										  <p align="center">
										  attr()
										  removeAttr()
										  prop()
										  removeProp()
										  样式操作（4个函数）
										  3.样式类名操作（4个函数）
										  .demo{属性：属性值..}
										  addClass()
										  removeClass()
										  toggleClass()
										  hasClass()
										 4. 元素样式操作（5个函数）
										 css()
										 
										   5.插入和删除操作（7个函数 ）
										   append()和prepend()
										   after()和before()
										   remove()和empty()
										   replaceWith()
										   6.元素遍历操作（6个函数）
										   7.JQ动画操作（7个函数）
										   */
		</script>
	</body>
</html>